<template>
  <el-container>
    <div class="left">
      <el-button size="mini" @click="toggleAside">
        <!-- <i class="el-icon-s-fold" ref="toggle"></i> -->
        <svg-icon ref="toggle" :icon-class="this.iconName" />
      </el-button>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          ><span class="bc-title">首页</span></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><span class="bc-title">{{ page.name }}</span></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="right">
      <el-dropdown
        class="avatar-container right-menu-item hover-effect"
        trigger="click"
      >
        <div class="avatar-wrapper">
          <img :src="userImg" alt="#" class="user-avatar" />
          <span style="font-size: 13px">{{ userName }}</span>
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/main/ain-info">
            <el-dropdown-item> 个人中心 </el-dropdown-item>
          </router-link>
          <span style="display: block" @click="loginOut">
            <el-dropdown-item divided> 退出登录 </el-dropdown-item>
          </span>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-container>
</template>

<script>
import axios from "../utils/axios";
import eventBus from "../utils/eventBus";
import {daochupost} from "../utils/api"
export default {
  name: "Header",
  props: ["collapse", "page"],
  created() {
    this.getImg();
    this.getInfo();
  },
  data() {
    return {
      iconName: "caidanzhankai",
      userImg: "",
      userName: "",
    };
  },
  watch: {
    "collapse.isHidden": {
      handler() {
        this.iconName =
          this.collapse.isHidden == true ? "caidanshouqi" : "caidanzhankai";
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getInfo() {
      axios({
        method: "GET",
        url: "/sys/user/getLoginUser",
      }).then((response) => {
        if (response.code == 200) {
          this.userName = response.data.userName;
         
           if(response.data.photo){
             this.downImg(response.data.photo)
          }else{
            this.userImg='../assets/imgs/default.jpg'
     
          }
          
        }
      });
    },
    //下载头像
    downImg(con) {
      daochupost( "/minio/download",{fileName:con}) .then((res) => {
          //修改信息
          let url111 = window.URL.createObjectURL(res);

          this.userImg = url111;
        })
        .catch((e) => {
          throw e;
        });
      // axios({
      //   method: "post",
      //   url: "/minio/download",
      //   headers: {
      //     "Content-Type": "application/json",
      //     // EngineCode: "j371gy1q1ioeveq2y05l4gjz3",
      //     // EngineSecret:
      //     //   "IgMlZo+KOs8FthII3KnobUoynILH5ELJVqcHNZcs1G2mwrkofR1THw==",
      //   },
      //   responseType: "blob",
      //   data: {
      //     fileName: con,
      //   },
      // })
      //   .then((res) => {
      //     //修改信息
      //     let url111 = window.URL.createObjectURL(res);

      //     this.userImg = url111;
      //   })
      //   .catch((e) => {
      //     throw e;
      //   });
    },
    //获取传来的头像
    getImg() {
      const that = this;
      eventBus.$on("touxiang", function (val) {
        that.userImg = val;
      });
    },
    //   头部按钮点击控制菜单折叠
    toggleAside() {
      this.collapse.isHidden = !this.collapse.isHidden;
    },
    loginOut() {
      var r = confirm("确认退出吗？");
      if (r == true) {
        axios({
          method: "GET",
          url: "/sys/logout",
        }).then((response) => {
          if (response.code === 200) {
            this.$message.success("已退出！");
            this.$router.push("/login");
          }
        });
      } else {
        this.$message("取消退出");
      }
    },
  },
};
</script>

<style scoped lang='less'>
.el-container {
  height: 5rem !important;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ccc;
}
.left {
  display: flex;

  align-items: center;
  margin-left: 1rem;
}
.right {
  margin-right: 3rem;
}
.el-button {
  height: 3rem;
}
.el-breadcrumb {
  padding-left: 20px;
  padding-right: 20px;
}
.avatar-wrapper {
  margin-top: 5px;
  display: flex;
  justify-content: space-around;
  align-items: center;
 

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .el-icon-caret-bottom {
    cursor: pointer;
    margin-top: 1rem;
    font-size: 1.8rem;
  }
  span{
      margin-top: 1rem;
      margin-left: 1rem;
  }
}
</style>